<template>
    <div class="app-container">
        <el-card>
            <el-space>
                <el-button type="success" :icon="Plus">新增</el-button>
                <el-input type="text" class="mr-8" placeholder="类型名称">类型名称</el-input>
                <el-button type="primary" :icon="Search">搜索
                </el-button>
                <el-button type="default" plain :icon="Refresh">重置
                </el-button>
            </el-space>
            <el-table class="mt" :data="dataList" border style="width: 100%;">
                <el-table-column prop="typeName" width="150" label="类型名称">
                </el-table-column>
                <el-table-column prop="offerMethod" label="报价方式">
                </el-table-column>
                <el-table-column prop="keyParams" width="800" label="关键参数">
                </el-table-column>
                <el-table-column prop="stackUp" width="100" label="上架" align="center">
                    <template v-slot="scope">
                        <el-switch v-model="scope.row.stackUp" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <el-button type="primary" link @click="openModal = true">编辑</el-button>
                    <el-button type="primary" link>属性</el-button>
                    <el-button type="primary" link>关联用户</el-button>
                    <el-button type="danger" link>删除</el-button>
                </el-table-column>
            </el-table>
        </el-card>
        <EditModal :open="openModal" :data="{}" @closeModal="openModal = false" @reload="reload"/>
    </div>
</template>
<script setup>
import { Plus, Refresh, Search } from '@element-plus/icons-vue';
import EditModal from './components/EditModal.vue';
const dataList = ref([
    {
        typeName: '默认',
        offerMethod: '',
        keyParams: '',
        stackUp: false,
        sort: 0
    },
])
const openModal = ref(false)

function reload(){

}
</script>
<style lang="scss" scoped>
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
    background-color: transparent !important;
}
</style>